<script>
import Taro from "@tarojs/taro";
import { reactive, watch } from "vue";
import { useTzRouter } from "@/vhooks/useTzRouter";
import { queryConsistPageApi, deleteConsistApi } from "../home/api";
import { getDicMap } from "@/utils/storage";
import TzVue, { useReachBottom, usePullDownRefresh } from "@/lib/TzVue";
import RecordList from "@/components/RecordList";
import { useRecordListConfig } from "../hooks/useRecordListConfig";

export default new TzVue({
  name: "confirmRecord",
  components: {
    "record-list": RecordList,
  },
  setup() {
    const state = reactive({
      confirmDataList: [],
      currentPage: 1,
      queryForm: {},
    });

    usePullDownRefresh(() => {
      state.currentPage = 1;
      queryConfirmData({ ...state.queryForm, currentPage: 1 });
      Taro.stopPullDownRefresh();
    });

    useReachBottom(() => {
      const params = { ...state.queryForm, currentPage: ++state.currentPage };
      queryConfirmData(params, true);
    });

    const { navigateTo, route } = useTzRouter();

    // loading watcher
    watch(
      () => state.showLoading,
      (newVal) => {
        newVal
          ? Taro.showLoading({
              title: "加载中",
            })
          : Taro.hideLoading();
      }
    );

    // 查询确报数据
    const queryConfirmData = (params, isAppend) => {
      if (state.showLoading) return;
      state.showLoading = true;
      return new Promise((resolve, reject) => {
        queryConsistPageApi(params)
          .then((res) => {
            state.showLoading = false;
            const { recordList, pageCount } = res.data;
            if (isAppend) {
              if (state.currentPage > pageCount) {
                Taro.showToast({
                  title: "已全部加载完成",
                  icon: "none",
                  duration: 2000,
                });
                // 把页数重置为上一页
                state.currentPage--;
                return;
              }
              state.confirmDataList.push(...recordList);
            } else {
              state.confirmDataList = recordList;
            }
            resolve();
          })
          .catch((err) => {
            state.showLoading = false;
            reject(err);
          });
      });
    };

    // 首次加载数据
    const params = { ...route.query, currentPage: 1 };
    // 保存请求数据
    state.queryForm = { ...route.query };
    queryConfirmData(params);

    // 海关确报查询
    const toConfirmCheck = () => {
      navigateTo({
        path: "/pages/subUser/webPage/index",
        query: {
          url:
            "https://xcxceshi.sztaizhou.com/site2/mnftq/MRoadTransportQuery.aspx",
          title: "海关确报查询",
        },
      });
    };

    const listItemClick = (data) => {
      navigateTo({
        path: "/pages/subCN/confirm/details/index",
        query: { consistId: data.consistId },
      });
    };

    const { inOutTypeDic, customsCode, statusDic } = getDicMap();

    const handleBtnClick = (data) => {
      if (["receipt", "receiptAndShot"].indexOf(data.hanldeName) !== -1) {
        const { consistId: consistid, inOutType, consistStatus } = data.data;

        navigateTo({
          path: "/pages/subCN/confirm/receipt/index",
          query: {
            consistid,
            inOutType: inOutTypeDic[inOutType],
            consistStatus,
          },
        });
      } else if (data.hanldeName === "delete") {
        const { consistId } = data.data;
        Taro.showModal({
          content: "确定删除该条记录吗?",
          confirmText: "确定",
          cancelText: "取消",
        })
          .then((res) => {
            return res.confirm ? deleteConsistApi(consistId) : Promise.reject();
          })
          .then(() => {
            state.currentPage = 1;
            queryConfirmData({ ...state.queryForm, currentPage: 1 });
          })
          .catch(() => {});
      }
    };

    const { handleData2Cell, cellRightDataConfig } = useRecordListConfig(
      inOutTypeDic,
      customsCode,
      statusDic
    );

    return () => {
      return (
        <tz-view class="confirm-record">
          <tz-view class="tip-board">
            <tz-icon class="tip-icon" name="tips"></tz-icon>
            <tz-view>
              <tz-view>
                超十分钟无回执,点击
                <tz-text class="link-btn" onClick={() => toConfirmCheck()}>
                  海关确报查询
                </tz-text>
              </tz-view>
              <tz-view>数据显示未核销,则捆绑成功可过关</tz-view>
            </tz-view>
          </tz-view>
          <tz-view class="content">
            {state.confirmDataList.length ? (
              <record-list
                dataList={state.confirmDataList}
                onItemClick={listItemClick}
                onBtnClick={handleBtnClick}
                cellList={handleData2Cell}
                cellRightDataConfig={cellRightDataConfig}
              ></record-list>
            ) : (
              <tz-view class="none-data">查询结果为空</tz-view>
            )}
          </tz-view>
        </tz-view>
      );
    };
  },
});
</script>

<style lang="scss">
.confirm-record {
  .tip-board {
    display: flex;
    font-size: 14px;
    line-height: 24px;
    width: 100%;
    justify-content: center;
    padding: 10px 0;
    background: beige;
    .tip-icon {
      font-size: 14px;
      height: 26px;
      color: $danger-color;
      margin-right: 2px;
    }
    .link-btn {
      color: $success-color;
    }
  }
  .content {
    padding-bottom: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    .none-data {
      font-size: 15px;
      color: $text-color;
    }
  }
}
</style>
